<template>
  <div id="app">
    <div id="cover"></div>
    <Header></Header>
    <div>{{fullName}}</div>
    <router-link :to="{name: 'app'}">app</router-link>
    <router-link to="/login">login</router-link>
    <transition name="fade">
      <router-view />
    </transition>
    <button @click="notify">BUTTON</button>
    <!--<notification content="test notify" />-->
    <Footer></Footer>
  </div>
</template>

<script>
import Header from './layout/header.vue'
import Footer from './layout/footer.jsx'
import { mapGetters } from 'vuex'

export default {
  metaInfo: {
    title: 'APP-Todo'
  },
  components: {
    Header,
    Footer
    // Todo
  },
  mounted () {

  },

  methods: {
    notify () {
      this.$notify({
        content: 'test $notify',
        btn: 'close'
      })
    }
  },
  computed: {
    ...mapGetters(['fullName'])
  }
}
</script>

<style lang="stylus" scoped>
#app{
  position absolute
  left 0
  right 0
  top 0
  bottom 0
}
#cover{
  position absolute
  left 0
  top 0
  right 0
  bottom 0
  background-color #999
  opacity .9
  z-index -1
}
</style>


